<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>
		<view class="padding-30">
			<view class="margin-30-0 flex-around" @click="$tools.navigateBack()">
				<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
				<view class="fontSize-18 color-000 flex1 text-center">课程已购买</view>
				<view style="width: 40rpx;"></view>
			</view>
			<!-- 商品信息 -->
			<view class="flex-boderRadius-view bg-fff padding-20 margin-bottom20">
				<view class="flex-alignItems-center margin-bottom30">
					<image class="img-160 margin-right20 border-radius10" :src="courseDetail.goods2.image"
						mode="widthFix"></image>
					<view class="flex1 flex-column">
						<view class="fontSize-16 color-000 margin-bottom20">{{courseDetail.goods2.title}}</view>
						<view class="flex-flex-warp">
							<view class="goods-info-tag flex-center" v-for="(item1,index1) in tagsList" :key="index1">
								{{item1}}
							</view>
						</view>
						<view class="fontSize-13 color-FE3232">￥<text
								class="fontSize-16">{{courseDetail.goods2.price}}</text></view>
					</view>
				</view>
				<view class="flex-between margin-bottom30">
					<view class="fontSize-15 color-000">剩余课时</view>
					<view class="fontSize-15 color-000">{{courseDetail.course_count}}节</view>
				</view>
				<view class="flex-between">
					<view class="fontSize-15 color-000">已上课时</view>
					<view class="fontSize-15 color-000">{{courseDetail.learn_count}}节</view>
				</view>
			</view>

			<!-- 折扣二维码 -->
			<view class="flex-boderRadius-view bg-fff padding-20 margin-bottom20">
				<view class="flex-between f-divider1 padding-bottom30 margin-bottom30"
					@click="$tools.navigateTo('/pages/mine/mine-list/verification-record?id='+courseDetail.id)">
					<view class="fontSize-15 color-000">核销记录</view>
					<u-icon name="arrow-right" color="#333333" size="20"></u-icon>
				</view>
				<view class="flex-justAliCenter-column">
					<view class="fontSize-18 color-704234 fontWeight-bold margin-bottom30">核销二维码</view>
					<view class="fontSize-20 color-704234 fontWeight-bold margin-bottom30">{{courseDetail.coupon_code}}
					</view>
					<!-- <image class="img-280 margin-50-0" style="border: 2px solid #967C5E;" src="../../../static/image/002.jpg" mode=""></image> -->
					<canvas canvas-id="qrcode" style="width: 340rpx;height: 340rpx;margin: 0 auto;" />
					<!-- <view class="erweima-btn flex-between" @click="discountPopupShow = true">
						<view class="fontSize-13 color-704234">券码</view>
						<view class="fontSize-13 color-704234">待使用券码2份</view>
						<view class="fontSize-13 color-704234">复制</view>
					</view> -->
				</view>
			</view>

			<view class="flex-boderRadius-view bg-fff padding-20 margin-bottom20">
				<!-- <view class="fontSize-18 color-000 fontWeight-bold margin-bottom20">使用须知</view> -->
				<view class="flex1 margin-bottom20 flex-between">
					<view class="fontSize-15 color-000">购买时间</view>
					<view class="fontSize-15 color-000 margin-right10">{{courseDetail.createtime}}</view>
				</view>
				<view class="flex1 margin-bottom20 flex-between">
					<view class="fontSize-15 color-000">支付方式</view>
					<view class="fontSize-15 color-000 margin-right10">{{courseDetail.pay_type}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/utils/uqrcode.js' //引入uqrcode.js
	export default {
		data() {
			return {
				id: '',
				courseDetail: {},
				tagsList: [],
				canvasId: 'myQrCode'
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.id) {
				this.id = e.id
				this.getCourseDetail(this.id)
			}
		},
		methods: {
			// 生成二维码
			qrCode(url) {
				console.log(url)
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: ''+url,
					size: 170,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {}
				})
			},
			// 获取详情信息
			async getCourseDetail(id) {
				let res = await this.$http.post(this.$api.course_detail, {
					id: this.id
				}, {
					token: true
				})
				if (res.code == 1) {
					this.courseDetail = res.data
					if (res.data.goods2.tag) {
						this.tagsList = res.data.goods2.tag.split(',')
					}
				}
				this.qrCode(this.courseDetail.id); // 页面加载完成后生成二维码
				console.log(res)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.erweima-btn {
		width: 360rpx;
		padding: 0 20rpx;
		height: 56rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #947065;
		background: #FFFBF2;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 1rpx solid #6D2205;
	}

	.goods-info-tag {
		padding: 5rpx 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #947065;
		background: rgba(148, 112, 101, 0.14);
		border-radius: 20rpx;
		border: 1rpx solid #967C5E;
		margin: 0 20rpx 20rpx 0;
	}
</style>